<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <script src="../vue-2.6.11.js"></script>
  <body>
    <!-- 模板 -->
    <div id="app">
      <!-- 父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译 -->
      <custom-component>
        <!-- 渲染的数据是父组件中的数据 -->
        <p>{{ message }}</p>
      </custom-component>
    </div>

    <script>
      Vue.component('custom-component', {
        data: function() {
          return {
            message: '我是子组件的数据'
          }
        },
        template: `
				<div>
					<p>{{ message }}</p>
					<slot></slot>
				</div>`
      })

      //数据
      var data = {
        message: '我是父组件中的数据'
      }

      var vm = new Vue({
        el: '#app',

        data: data
      })
    </script>
  </body>
</html>
